<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 时间规定：1s内  -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100%;
            height: 2000px;
            background-color: pink;
        }
        .rocket {
            width: 148px;
            height: 249px;
            background-image: url(./img/QQ图片20210803160339.png);
            position: fixed;
            right: 0;
            bottom: 20px;
        }
        .rocket:hover {
            background-position: -148px 0;
        }
        .active {
            animation: fire 1s infinite steps(4);
        }
        @keyframes fire {
            0% {
                background-position: -296px 0;
            }
            100% {
                background-position: -892px 0;
            }
        }
    </style>
    <div class="box">
        <div class="rocket"></div>
    </div>
    <script>
        // 1.先做点火 当hover rocket盒子的时候
        // 添加一个类名，效果就是让火箭的动画动起来
        // 2.我们要首先知道 我们的火箭需要移动的距离是多少 滚动条移动的距离是多少
        //     S火 = 火箭.offsetTop + 火箭本身的高度
        //     S滚 = 滚动条.scrollTop
        //     时间都是 1s
        // 要满足题目要求      我这定时器要 走50次
        let rocket = document.querySelector('.rocket');
        rocket.addEventListener('click', function() {
            rocket.classList.add('active');
            // 求S火
            let rocket_distance = rocket.offsetTop + 250;
            // 求S滚
            let scroll_distance = document.documentElement.scrollTop;
            // 求V火
            let rocket_v = rocket_distance / 50;
            // 求V滚
            let scroll_v = scroll_distance / 50;
            let timer = setInterval(function() {
                // rocket 要修改 rocket.style.top
                rocket.style.top = `${rocket.offsetTop - rocket_v}px`
                document.documentElement.scrollTop -= scroll_v;
                if(document.documentElement.scrollTop == 0) {
                    clearInterval(timer);
                    rocket.style.top = "";
                    rocket.classList.remove("active");
                }
            }, 20);
        })
    </script>
</body>
</html>